<template>
  <el-container style="height: 100vh; overflow: hidden">
    <el-header class="custom-header">
      <span style="color: rgb(245, 245, 245)"
        >人机增强多智能体量化评估与演化</span
      >
      <div class="nav-tab">
        <el-tabs
          style="color: rgb(245, 245, 245)"
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="模型" name="first" style="font:16px;"></el-tab-pane>
          <!-- <el-tab-pane label="性能" name="second"></el-tab-pane> -->
          <el-tab-pane label="场景" name="third"></el-tab-pane>
        </el-tabs>
      </div>
    </el-header>
    <el-main style="background-color: rgb(33, 108, 157)">
      <el-row>
        <el-col :span="24">
          <!-- 模型、性能、效果部分 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-button type="primary" @click="handleCalculate">算例   </el-button>
              <el-button type="primary" style="margin-left:30px;" @click="handleAgent">智能体   </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <router-view />
    </el-main>
  </el-container>
</template>  
  
<script lang="ts" setup>
import { computed, defineComponent, onMounted, ref, watch } from "vue";
import type { ImageProps } from "element-plus";
import axios from "axios";
import {useRouter} from 'vue-router'

const activeName = ref('first');

function handleCalculate(){
    router.push('/mainbox/calculate')
}

function handleAgent(){
    router.push('/mainbox/agent')
}

const router = useRouter();

const handleClick = (item) => {
  activeName.value = item;
  console.log(activeName.value.props.name);
  if(activeName.value.props.name==="second"){
      router.push('/performance')
  }else if(activeName.value.props.name==="third"){
      router.push('/effect')
  }
};

onMounted(()=>{
  router.push('/mainbox/calculate')
})


function simulateAndVerify() {}

</script>  
  
<style scoped lang="scss">
::v-deep .el-tabs__item {  
  font-size: 16px; /* 设置你想要的字体大小 */  
  /* 如果需要，还可以添加其他样式 */  
}  

analysis-button {
  background-color: rgb(33, 108, 157);
}

::v-deep .el-tabs__item {
  color: rgb(245, 245, 245);
}

.box-card {
  margin-bottom: 10px;
  background-color: rgb(26, 68, 94);
  color: rgb(245, 245, 245);
  border-width: 0;
}
/* 其他样式 */
.custom-header {
  background-color: rgb(26, 68, 94);
  padding-top: 15px;
}

.nav-tab {
  display: inline-block; /* 使 div 表现得像行内块级元素 */
  float: right; /* 使其右浮动 */
  color: rgb(245, 245, 245);
}

/*图片 */
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.el-main {
  --el-main-padding: 10px;
}
</style>